<template>
	<div>
		<a-drawer :title="`详情-${CoreIndicateMap[pageState.selectedObj.value]}`" placement="right" :closable="true"
			:visible="visible" width="1000px" :zIndex="10000" :after-visible-change="afterVisibleChange" @close="onClose">
			<div class="search-bar">
				<span>身份</span>
				<a-input v-model.trim='searchInfo.code' style="width: 300px; margin: 0 8px" placeholder='请输入' />
				<a-button type="primary" @click="queryData">查询</a-button>
			</div>

			<a-table v-if="pageState.selectedObj.value == CoreIndicateEnum.SendGoods" :columns='columns1' :loading="loading"
				:pagination="false" :data-source='tableData' />

			<a-table v-if="pageState.selectedObj.value == CoreIndicateEnum.CompletionQuantity" :columns='columns2'
				:loading="loading" :pagination="false" :data-source='tableData' />

			<a-table v-if="pageState.selectedObj.value == CoreIndicateEnum.DriverNums" :columns='columns3'
				:loading="loading" :pagination="false" :data-source='tableData' />

			<a-table v-if="pageState.selectedObj.value == CoreIndicateEnum.ShipnerNums" :columns='columns4'
				:loading="loading" :pagination="false" :data-source='tableData' />

			<a-table v-if="pageState.selectedObj.value == CoreIndicateEnum.StopingDriversCount" :columns='columns6'
				:loading="loading" :pagination="false" :data-source='tableData' />
		</a-drawer>
	</div>
</template>

<script>

import moment from "moment";
import tableColumns from "./detail-table-heade"
import UrbanService from "@/service/urban-map.service"
import { CoreIndicateEnum, CoreIndicateMap } from "@/model/city-map.enum";

export default {
	name: 'detil-table',
	props: {
		visible: {
			type: Boolean,
			default: () => false,
		},
		pageState: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			CoreIndicateEnum,
			CoreIndicateMap,
			searchInfo: {
				code: ''
			},
			tableData: [],
			loading: false,

			columns1: [],
			columns2: [],
			columns3: [],
			columns4: [],
			columns6: [],
		}
	},

	created() {
		this.setColumns();
	},

	methods: {

		setColumns() {
			this.columns1 = tableColumns[1];
			this.columns2 = tableColumns[2];
			this.columns3 = tableColumns[3];
			this.columns4 = tableColumns[4];
			this.columns6 = tableColumns[6];
		},

		queryData() {
			this.init()
		},

		async init() {
			this.tableData = [];
			try {
				this.loading = true;
				const params = {
					uuid: this.pageState.uuid, // "027c98b5d98c0cc438d0cc2463e8a41e"
					searchDate: moment(this.pageState.searchForm.searchDate).format("YYYYMMDD"),
					// userId: this.searchInfo.code,
					coreType: this.pageState.selectedObj.value,
				}
				if (this.searchInfo.code) {
					params.userId = this.searchInfo.code;
				}
				const data = await UrbanService.indicatorUserDetail(params)
				this.tableData = data;
			} catch (error) {
				console.log(error);
			} finally {
				this.loading = false;
			}


		},

		afterVisibleChange(val) {
			this.searchInfo.code = '';
		},

		onClose() {
			this.$emit('update:visible', false);
		},
	}
}

</script>
<style scoped>
.mr-4 {
	margin-right: 8px;
}

.search-bar {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}
</style>
